<template>
  <div class="map-box">
    <div id="map"></div>
    <div style="padding:20px;text-align: left;font-size: 18px;">
    <form>
      <h3>当前底图为: 
        <span id="curMapName"></span>
      </h3>
      <input style="margin-left:20px;" type="button" id="changeMapStandard" value="切换标准地图">
      <input style="margin-left:20px;" type="button" id="changeMapSatellite" value="切换卫星地图">
      <input style="margin-left:20px;" type="button" id="changetianditu" value="切换为天地图底图">
      <input style="margin-left:20px;" type="button" id="changeamap" value="切换为高德底图">
    </form>
  </div>
  </div>
</template>
<script setup>
  import { onMounted } from 'vue'
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  const scripts = [
    'http://1.95.157.217/wmap/wmap.umd.js'
  ]
  async function loadScripts (scripts) {
    for (const url of scripts) {
      try {
        await loadScript(url);
      } catch (err) {
        console.error(`${url} failed:`, err);
      }
    }
  }
  onMounted(() => {
    loadScripts(scripts).then(() => {
      const map = new WMap.Map('map', {
        center: [104.42239474922181, 34.63836406549072]
      })

      map.on('click', e => {
        map.panTo(e.lngLat)
        console.log(e.lngLat)
      })

      const changeMapSatelliteDom = document.getElementById('changeMapSatellite')
      const changeMapStandardDom = document.getElementById('changeMapStandard')
      const changetianditu = document.getElementById('changetianditu')
      const changeamap = document.getElementById('changeamap')
      const curMapName = document.getElementById('curMapName')
      curMapName.innerText = map.getBaseMap()[0].get('mapName')
      //卫星地图
      changeMapSatelliteDom.onclick = () => {
        map.setBaseLayer('satellite')
      }

      //标准地图
      changeMapStandardDom.onclick = () => {
        map.setBaseLayer('standard')
      }

      // 天地图底图 token请自行到官网申请
      changetianditu.onclick = () => {
        // setBaseMap第一参数为天地图时，第二参数token必传！
        map.setBaseMap('tianditu')
        curMapName.innerText = map.getBaseMap()[0].get('mapName')
      }

      // 高德底图
      changeamap.onclick = () => {
        map.setBaseMap('amap')
        curMapName.innerText = map.getBaseMap()[0].get('mapName')
      }

    })
  })
</script>
<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: calc(100% - 100px);
}
</style>
